import router from './router'
import store from './store'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
import getPageTitle from '@/utils/get-page-title'
import { asyncRoutes } from '@/router/index'

// 路由守卫
//  to:要去哪个页面
//  from:从哪里来
//  next:它是一个函数。
//     如果直接放行 next()
//     如果要跳到其它页 next(其它页)
const whiteList = ['/login', '/404'] // 白名单
router.beforeEach(async(to, form, next) => {
  document.title = getPageTitle(to.meta.title)
  // 开启进度条
  NProgress.start()
  // 从vuex中拿到token（拿来把你 token）
  const token = store.state.user.token
  if (token) {
    if (whiteList.includes(to.path)) {
      console.log('用户登录，不能去login')
      next('/')
      NProgress.done()
    } else {
      // 如果没有userId
      if (!store.getters.userId) {
        // 1. 获取个人信息
        const menu = await store.dispatch('user/getUserInfo')
        // 动态添加可以访问的路由设置
        // 根据用户实际能访问几个页面来决定从整体8个路由设置
        // 中，过滤中出来几个，然后保存到vuex中

        // 根据本用户实际的权限menus去 asyncRoutes 中做过滤，选出本用户能访问的页面
        const filterRoutes = asyncRoutes.filter(route => {
          const routeName = route.children[0].name
          return menu.includes(routeName)
        })
        // 补充404
        filterRoutes.push(
          { path: '*', redirect: '/404', hidden: true }
        )
        // 一定要在进入主页之前去获取用户信息
        // addRoutes用来动态添加路由配置
        // 只有在这里设置了补充了路由配置，才可能去访问页面
        // 它们不会出现左侧
        router.addRoutes(filterRoutes)
        // 生成左侧菜单时，也应该去vuex中拿
        store.commit('menu/setMenuList', filterRoutes)

        // 解决刷新页面白屏bug的方法
        next({
          ...to, // 重新进一次页面
          replace: true // 重进一次，不保留重复历史
        })
      } else {
        next()
      }
    }
  } else {
    // 没有token，只能访问白名单
    if (whiteList.includes(to.path)) {
      next()
    } else {
      console.log('没有token，只能访问白名单')
      next('/login')
      // 结束进度条
      NProgress.done()
    }
  }
})
// 结束进度条
router.afterEach(() => {
  NProgress.done()
})
